<template>
  <div class="cinema-info-container">
    <div class="cinema-card">
      <!-- Display Mode -->
      <div v-if="!isEditing" class="display-mode">
        <div class="header">
          <h1 class="title">{{ cinema.name }}</h1>
          <button @click="toggleEdit" class="edit-button">
            <svg xmlns="http://www.w3.org/2000/svg" class="icon" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
            </svg>
            修改影院信息
          </button>
        </div>

        <div class="content-grid">
          <div class="info-column">
            <div class="info-card basic-info">
              <div class="info-list">
                <div class="info-item">
                  <span class="info-label">影院名称:</span>
                  <span class="info-value">{{ cinema.name }}</span>
                </div>
                <div class="info-item">
                  <span class="info-label">影院地址:</span>
                  <span class="info-value">{{ cinema.address }}</span>
                </div>
                <div class="info-item">
                  <span class="info-label">影院电话:</span>
                  <span class="info-value">{{ cinema.phone }}</span>
                </div>
              </div>
            </div>

            <div class="info-card operation-info">
              <h3 class="section-title">营业信息</h3>
              <div class="info-item">
                <span class="info-label">营业时间:</span>
                <div class="time-range">
                  <span class="time">{{ cinema.openTime }}</span>
                  <span class="time-separator">至</span>
                  <span class="time">{{ cinema.closeTime }}</span>
                </div>
              </div>
              <div class="info-item">
                <span class="info-label">影厅类型:</span>
                <div class="theater-types">
                  <span v-for="(type, index) in cinema.theaterTypes" :key="index" class="theater-type">
                    {{ type }}
                  </span>
                </div>
              </div>
            </div>
          </div>

          <div class="image-column">
            <h3 class="section-title">影院图片</h3>
            <div class="image-container">
              <img :src="cinema.image" alt="影院图片" class="cinema-image" />
              <div class="image-overlay"></div>
              <div class="image-caption">
                <div class="caption-title">{{ cinema.name }}</div>
                <div class="caption-subtitle">高品质观影体验</div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- Edit Mode -->
      <div v-else class="edit-mode">
        <h1 class="edit-title">修改影院信息</h1>

        <form @submit.prevent="saveChanges" class="edit-form">
          <div class="edit-grid">
            <div class="edit-column">
              <div class="edit-card basic-edit">
                <h3 class="section-title">基本信息</h3>
                <div class="form-group">
                  <div class="form-field">
                    <label class="form-label">影院名称</label>
                    <input v-model="editedCinema.name" type="text" class="form-input" />
                  </div>

                  <div class="form-field">
                    <label class="form-label">影院地址</label>
                    <input v-model="editedCinema.address" type="text" class="form-input" />
                  </div>

                  <div class="form-field">
                    <label class="form-label">影院电话</label>
                    <input v-model="editedCinema.phone" type="text" class="form-input" />
                  </div>
                </div>
              </div>

              <div class="edit-card operation-edit">
                <h3 class="section-title">营业信息</h3>
                <div class="form-group">
                  <div class="time-fields">
                    <div class="form-field">
                      <label class="form-label">营业开始时间</label>
                      <input v-model="editedCinema.openTime" type="time" class="form-input" />
                    </div>

                    <div class="form-field">
                      <label class="form-label">营业结束时间</label>
                      <input v-model="editedCinema.closeTime" type="time" class="form-input" />
                    </div>
                  </div>

                  <div class="form-field">
                    <label class="form-label">拥有影厅类型 (用逗号分隔)</label>
                    <input v-model="theaterTypesInput" type="text" class="form-input" />
                  </div>
                </div>
              </div>
            </div>

            <div class="edit-column">
              <div class="edit-card image-edit">
                <h3 class="section-title">影院图片</h3>
                <div class="form-field">
                  <label class="form-label">图片 URL</label>
                  <input v-model="editedCinema.image" type="text" class="form-input" />
                </div>
                <div class="image-preview-container">
                  <div class="image-preview">
                    <img :src="editedCinema.image" alt="影院图片预览" class="preview-image" />
                    <div class="preview-overlay">
                      <span class="preview-text">预览图片</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div class="form-actions">
            <button type="button" @click="cancelEdit" class="cancel-button">
              取消
            </button>
            <button type="submit" class="save-button">
              保存更改
            </button>
          </div>
        </form>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue';

// 默认影院信息
const cinema = ref({
  name: '星光国际影城',
  address: '北京市朝阳区建国路88号购物中心5层',
  phone: '010-12345678',
  openTime: '10:00',
  closeTime: '22:00',
  theaterTypes: ['IMAX厅', '杜比全景声厅', 'VIP厅', '4D厅'],
  image: 'https://images.unsplash.com/photo-1517604931442-7e0c8ed2963c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80'
});

// 编辑状态
const isEditing = ref(false);
const editedCinema = ref({ ...cinema.value });

// 用于编辑影厅类型的输入字段
const theaterTypesInput = computed({
  get: () => editedCinema.value.theaterTypes.join(', '),
  set: (val) => {
    editedCinema.value.theaterTypes = val.split(',').map(type => type.trim()).filter(type => type);
  }
});

// 切换编辑模式
const toggleEdit = () => {
  isEditing.value = true;
  editedCinema.value = JSON.parse(JSON.stringify(cinema.value));
};

// 保存更改
const saveChanges = () => {
  cinema.value = JSON.parse(JSON.stringify(editedCinema.value));
  isEditing.value = false;
};

// 取消编辑
const cancelEdit = () => {
  isEditing.value = false;
};
</script>

<style scoped>
/* 基础样式 - 适配您的内容区域 */
.cinema-info-container {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1rem;
  margin-top: 40px;
  /* 添加上边距 */
}

.cinema-card {
  width: 100%;
  max-width: 1000px;
  background-color: white;
  border-radius: 0.5rem;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  max-height: calc(100vh - 160px);
  /* 限制最大高度，防止滚动条 */
  /* overflow: auto;
  如果内容超出，则在卡片内部显示滚动条 */
}

/* 显示模式样式 */
.display-mode {
  padding: 1.5rem;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid #e5e7eb;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.title {
  font-size: 1.5rem;
  font-weight: 700;
  color: #1f2937;
}

.edit-button {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.5rem 1rem;
  background-color: #1890ff;
  color: white;
  border: none;
  border-radius: 0.25rem;
  transition: all 0.3s;
  font-size: 0.875rem;
  cursor: pointer;
}

.edit-button:hover {
  background-color: #096dd9;
}

.icon {
  width: 1rem;
  height: 1rem;
}

.content-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

@media (min-width: 768px) {
  .content-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.info-column {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.info-card {
  padding: 1rem;
  border-radius: 0.375rem;
}

.basic-info {
  background-color: #f0f5ff;
  border-left: 3px solid #1890ff;
}

.operation-info {
  background-color: #fffbe6;
  border-left: 3px solid #faad14;
}

.section-title {
  font-size: 1rem;
  font-weight: 600;
  color: #1f2937;
  margin-bottom: 0.5rem;
}

.info-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.info-item {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 0.25rem;
  font-size: 0.875rem;
}

.info-label {
  min-width: 5rem;
  width: auto;
  font-weight: 600;
  color: #4b5563;
}

.info-value {
  color: #1f2937;
  flex: 1;
}

.time-range {
  display: flex;
  align-items: center;
}

.time {
  font-weight: 500;
  color: #1f2937;
}

.time-separator {
  margin: 0 0.25rem;
  color: #6b7280;
}

.theater-types {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.theater-type {
  padding: 0.25rem 0.5rem;
  background-color: white;
  color: #d48806;
  font-size: 0.8rem;
  border-radius: 9999px;
  border: 1px solid #ffe58f;
}

.image-column {
  display: flex;
  flex-direction: column;
}

.image-container {
  position: relative;
  height: 15rem;
  overflow: hidden;
  border-radius: 0.5rem;
  box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.06);
}

.cinema-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s;
}

.image-container:hover .cinema-image {
  transform: scale(1.05);
}

.image-overlay {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(to top, rgba(0, 0, 0, 0.6), transparent);
}

.image-caption {
  position: absolute;
  bottom: 0.75rem;
  left: 0.75rem;
  color: white;
}

.caption-title {
  font-size: 1.125rem;
  font-weight: 700;
}

.caption-subtitle {
  font-size: 0.8rem;
  opacity: 0.9;
}

/* 编辑模式样式 - 更紧凑的布局 */
.edit-mode {
  padding: 1rem;
}

.edit-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: #1f2937;
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid #e5e7eb;
}

.edit-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.edit-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

@media (min-width: 768px) {
  .edit-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.edit-column {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.edit-card {
  padding: 0.75rem;
  border-radius: 0.375rem;
}

.basic-edit {
  background-color: #f0f5ff;
}

.operation-edit {
  background-color: #fffbe6;
}

.image-edit {
  background-color: #f9fafb;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.form-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 500;
  color: #4b5563;
}

.form-input {
  width: 100%;
  padding: 0.375rem 0.5rem;
  border-radius: 0.25rem;
  border: 1px solid #d9d9d9;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  font-size: 0.875rem;
}

.form-input:focus {
  outline: none;
  border-color: #1890ff;
  box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
}

.time-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
}

.image-preview-container {
  margin-top: 0.5rem;
}

.image-preview {
  position: relative;
  height: 10rem;
  /* 减小高度 */
  overflow: hidden;
  border-radius: 0.375rem;
  box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.06);
}

.preview-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.preview-overlay {
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s;
}

.image-preview:hover .preview-overlay {
  opacity: 1;
}

.preview-text {
  color: white;
  background-color: rgba(0, 0, 0, 0.5);
  padding: 0.125rem 0.5rem;
  border-radius: 0.25rem;
  font-size: 0.75rem;
}

.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid #e5e7eb;
  flex-wrap: wrap;
}

.cancel-button {
  padding: 0.375rem 0.75rem;
  border: 1px solid #d9d9d9;
  border-radius: 0.25rem;
  color: rgba(0, 0, 0, 0.65);
  background-color: white;
  transition: all 0.3s;
  font-size: 0.875rem;
  cursor: pointer;
}

.cancel-button:hover {
  color: #1890ff;
  border-color: #1890ff;
}

.save-button {
  padding: 0.375rem 0.75rem;
  background-color: #1890ff;
  color: white;
  border: none;
  border-radius: 0.25rem;
  transition: all 0.3s;
  font-size: 0.875rem;
  cursor: pointer;
}

.save-button:hover {
  background-color: #096dd9;
}

/* 媒体查询，针对非常小的屏幕 */
@media (max-width: 480px) {
  .header {
    flex-direction: column;
    align-items: flex-start;
  }

  .edit-button {
    width: 100%;
    justify-content: center;
  }

  .info-item {
    flex-direction: column;
  }

  .info-label {
    width: 100%;
  }

  .form-actions {
    justify-content: center;
  }

  .cancel-button,
  .save-button {
    width: 100%;
    text-align: center;
  }
}
</style>